<template>
<div class="container">
	<!--第一行-->
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		  </button>
		  <a class="navbar-brand" href="#/"><img src="../assets/img/logo.png" class="img-rounded" width="50px"/></a>
		</div>
	
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-nav">
			<li><a href="#">中软国际 <span class="sr-only">(current)</span></a></li>
		  </ul>
		  <ul class="nav navbar-nav navbar-right">
			<li><a href="#">{{loginName}}</a></li>
			<li><a href="#">注册</a></li>
		  </ul>
		</div>
	  </div>
	</nav>
	<!--第二行-->
	<div class="row">
		<div class="col-md-1 col-md-offset-1 col-sm-4 col-xs-4">
			人才测评
		</div>
		<div class="col-md-1 col-md-offset-3 col-sm-4 col-xs-4">
			<div class="row">
				<div id="business" class="col-md-5">
					企业
				</div>
				<div class="col-md-7">
					<span class="fa fa-angle-down"></span>
					<div id="business-show-info">
						<div>
							<div id="tab_left">
								<div class="tab-item">
									<router-link to="/Solution">
									<span class="fa fa-comments-o" style="padding-right:10px"></span>解决方案
									</router-link>
								</div>
								<div class="tab-item">
									<router-link to="/ProductCatalog">
									<span class="fa fa-list" style="padding-right:10px"></span> 产品目录
									</router-link>									
								</div>
							</div>
							<div id="tab_right">
								
								<div class="main">
									<img src="../assets/img/t1.png" height="98%">
								</div>
								<div class="main">
									<img src="../assets/img/t2.png" height="98%">
								</div>
								
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-1 col-sm-4 col-xs-4">
			<router-link to="/Oneself">
			个人
			</router-link>
		</div>
	</div>
	<!--第三行-->
	<div class="row">
		<div class="col-md-12">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <ol class="carousel-indicators">
				<li  v-for="(item, index) in blist" :key="index" :class="{active: index == 0}" data-target="#carousel-example-generic" :data-slide-to="index"></li>
			  </ol>
			  <div class="carousel-inner" role="listbox">
				<div v-for="(item, index) in blist" :key="index" :class="{'active': index == 0, item: true}">
					<img :src="item.imgpath2" alt="..." style="width:100%">
					<div class="carousel-caption">
						<h3>{{item.title}}</h3>
					</div>
				</div>
			  </div>
			
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12" style="padding: 0px;">
			<div id="body-left">
				<div v-for="p in productTypelist">
					<p v-if="p.fid==undefined">{{p.tname}} <span class="fa fa-angle-up"></span></p>
					<ul>
						<li v-for="pFid in productTypelist" v-if="p.id == pFid.fid" @click="getProduct(pFid.id)">{{pFid.tname}}</li>
					</ul>
				</div>
			</div>
			<!--右侧的菜品显示框-->
			<div id="body-right">
				<div class="product_info" v-for="pro in productlist">
					<div class="product_list">
						<div class="right_top_info">
							￥{{pro.price}}
						</div>
						<p></p>
						<p>{{pro.title}}</p>
						<p></p>
						<div class="product_btn">
							<input type="button" id="" value="立即进入" class="btn btn-success"/>
						</div>
					</div>
				</div>
				<p style="clear:both"></p>
				<div id="fenye" v-if="fenye.total != null">
					共{{fenye.total}}条, <i class="fa fa-angle-left" @click="getProduct(null,fenye.prePage)" v-if="fenye.hasPreviousPage"></i>
					<span v-for="i in fenye.navigatepageNums" @click="getProduct(null,i)">{{i}}</span>
					<i class="fa fa-angle-right" @click="getProduct(null,fenye.nextPage)" v-if="fenye.hasNextPage"></i>
					前往<input type="text" size="1" v-model="pageNumber" @keyup="getProduct(null,null)">页
				</div>
			</div>
			
		</div>
	</div>
	
	
</div>



</template>
<script>
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import {baseUrl} from '../util/global.js'

$(function(){
	$("#body-left p").click(function(){
		$(this).next('ul').slideToggle(500);
		$(this).removeClass('body-left-p-active body-left-p-nonactive');
		$(this).addClass('body-left-p-active').parent().siblings().find("p").addClass("body-left-p-nonactive");
		
		if($(this).find('span').hasClass('fa-angle-up')){
			$(this).find('span').removeClass('fa-angle-up');
			$(this).find('span').addClass('fa-angle-down');
		}else{
			$(this).find('span').removeClass('fa-angle-down');
			$(this).find('span').addClass('fa-angle-up');
		}
		
	});
	$("#business-show-info").parent().on("mouseover",function(){
		$(this).find("#business-show-info").stop().slideDown();
		$(this).find("span")[0].className="fa fa-angle-up";
	})
	$("#business-show-info").parent().on("mouseout",function(){
		$(this).find("#business-show-info").stop().slideUp();
		$(this).find("span")[0].className="fa fa-angle-down";
	});
	$("#tab_left .tab-item").mouseenter(function () {
		$(this).addClass("active").siblings().removeClass("active");        
		var idx=$(this).index();        
		$("#tab_right .main").eq(idx).addClass("selected").siblings().removeClass("selected");
		console.log("测试",$("#tab_right .main").eq(idx).html());
	});
})
export default {
    name: 'ProductCatalog',
	created(){
		this.getProductType();
	},
    methods: {
        getProductType() {
			let that = this;
			
            $.get(baseUrl+"/selectAllProducts.action", function(data){
				that.productTypelist = data.data;
            }, 'json');
			
			$.get(baseUrl+"/getBanner.action", {modid: '2'}, function(data) {
				that.blist = data.data
			}, 'json');
			
			setTimeout(function(){
				that.getProduct(that.productTypelist[1].id);
			},50);
			if(localStorage.getItem("name") != null){
				that.loginName = localStorage.getItem("name");
			}else{
				that.loginName = "登录";
			}
        },
		getProduct(id,newPage){
			if(newPage == null && this.page != null){
				this.page = this.pageNumber;
			}
			if(newPage != null){
				this.page = newPage;
			}
			
			
			if(id == null){
				id = sessionStorage.getItem("id");
			}else{
				sessionStorage.setItem("id",id);
			}
			let that = this;
			$.get(baseUrl+"/selectAllProductsByType.action",{tid:id,page:that.page,limit:that.limit}, function(data){
				
				console.log("所有数据：",data);
				console.log("data：",data.data.list);
				that.productlist = data.data.list;
				that.fenye = data.data;
				
				
            }, 'json')
			setTimeout(function(){
				if(newPage != null){
					this.page = newPage;
					$($("#fenye span").get(newPage-1)).addClass("active").siblings().removeClass("active");
				}else{
					console.log("111:",$("#fenye span")[0]);
					$("#fenye span").get(0).className="active";
				}
			},50);
			
			
		}
    },
	mounted() {
			$("#business-show-info").parent().on("mouseover",function(){
		$(this).find("#business-show-info").stop().slideDown();
		$(this).find("span")[0].className="fa fa-angle-up";
	});
	$("#business-show-info").parent().on("mouseout",function(){
		$(this).find("#business-show-info").stop().slideUp();
		$(this).find("span")[0].className="fa fa-angle-down";
	});
	$("#tab_left .tab-item").mouseenter(function () {
		$(this).addClass("active").siblings().removeClass("active");
		var idx=$(this).index();
		$("#tab_right .main").eq(idx).addClass("selected").siblings().removeClass("selected");
		console.log("测试",$("#tab_right .main").eq(idx).html());
	});
	},
    data () {
        return {
           productTypelist:"",
		   productlist:"",
		   page:"0",
		   limit:"8",
		   fenye:"",
		   pageNumber:"0",
		   blist: [],
		   loginName:"登录"
        }
    }
}
</script>

<style scoped>
	.main{
		width:600px;
		height:200px;
		display:none !important;
		position:absolute;
		left:5px;
	}
	.selected{
		display:block !important;
	}
	#tab_left{
		width:160px;
		height:100px;
		float:left;
	}
	#tab_right{
		width:600px;
		height:200px;
		float:left;
		position:relative;
	}
	.tab-item{
		width:100%;
		height:50px;
		line-height:50px;
	}
	.active{
		background-color:#169bd5;
		color:white;
	}
	.navbar-brand{
		padding:8px 10px;
	}
	.navbar-default{
		background-color: white;
		border-radius: 0;
		border: 0px;
		border-bottom: 1px solid #ccc;
	}
	#business,#business~div{
		padding: 0px;
	}
	#business~div{
		font-size: 18px;
		margin-top: -3px;
		cursor: pointer;
		position: relative;
	}
	#business-show-info{
		position: absolute;
		display: none;
		width: 800px;
		height: 200px;
		background-color: white;
		left:-350px;
		/*top:30px;*/
		border: 1px solid #ccc;
		z-index: 999;
	}
	.carousel-inner img{
		min-height: 273px;
		max-height: 273px;
		height: 273px;
	}
	#body-left{
		float:left;
		width: 200px;
		flex: 1 1 auto;
		padding: 1.25rem;
		overflow-x: hidden;
		border-top: 1px solid #f5f5f5;
		border-left: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;
	}
	#business,#business~div{
		padding: 0px;
	}
	.body-items{
		font-size: 20px;
		text-align: right;
		padding: 14px 20px 4px 0px;
	}
	.body-items:hover{
		cursor: pointer;
		border-bottom: 1px solid red;
		color: red;
	}
	#body-right{
		float:left;
		width:calc(100% - 200px);
		min-height: 600px;
		flex: 1 1 auto;
		padding: 1.25rem;
		border: 1px solid #f5f5f5;
	}
	.item_left{
		float: left;
	}
	.item_right{
		float: right;
	}
	.item_right input{
		text-align: center;
	}
	.item_right input[type="button"]{
		width: 22px;
	}
	
	.product_info .product_list {
		width: calc(95%/3);
		padding: 10px;
		border: 1px solid #f5f5f5;
		margin: 5px;
		float: left;
		background-image: url(../assets/img/title1.png);
		background-size: 100%,100%;
		position: relative;
	}
	.product_list .right_top_info{
		position: absolute;
		right:8px;
		top:25px;
		color: red;
	}
	
	.product_list img {
		width: calc(100%);
	}
	
	.product_list p {
		padding: 5px 0px;
		font-size: 16px;
		text-align: center;
		color: #333;
		white-space: normal;
		width: 200px;
	}
	.product_btn{
		width:113px;
		margin: auto;
	}
	#body-left p,#body-left ul li{
		cursor: pointer;
		width: 100%;
		height: 35px;
		line-height: 35px;
		font-size: 20px;
		text-align: center;
		font-weight: bold;
	}
	#body-left ul{
		padding:0px;
	}
	#body-left ul li{
		list-style: none;
		font-size: 16px;
		font-weight: 100;
		
	}
	.upAndDown{
		background-color: cornflowerblue;
	}
	.body-left-p-active{
		background-color: #0099ff;
	}
	.body-left-p-nonactive{
		background-color: white;
	}
	#fenye li{
		list-style:none;
		width:10px;
		text-align:center;
		float:left;
	}
	#fenye span{
		display:inline-block;
		width:20px;
		text-align:center;
		cursor: pointer;
	}
	#fenye i{
		display:inline-block;
		width:20px;
		text-align:center;
		cursor: pointer;
	}
	.active{
		color:red;
	}
</style>